<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href="/css/shared.css" rel="stylesheet" />
    <link href="/css/core.css" rel="stylesheet" />
    <link href="/css/tooltip.css" rel="stylesheet" />
    <title>Fontra Font Info</title>
    <style>
      body {
        overflow: auto;
      }
      .main-container {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 0em;
        gap: 0em;
        width: 100vw;
        height: calc(100vh - var(--top-bar-height));
      }

      #header-container {
        display: grid;
        align-content: start;
        gap: 1em;
        padding: 1em 1em 1em 1em;
      }

      .header {
        cursor: pointer;
        font-size: 1.25em;
        font-weight: bold;
        text-underline-offset: 0.15em;
      }

      .header:hover {
        text-decoration: underline dotted;
      }

      .header.selected {
        text-decoration: underline;
      }

      .font-info-panel {
        display: grid;
        padding: 1em 1em 1em 0;
        outline: none;
      }

      .font-info-panel[hidden] {
        display: none;
      }

      #panel-container {
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <modal-dialog></modal-dialog>
    <div class="top-bar-container"></div>
    <div class="main-container">
      <div id="header-container"></div>
      <div id="panel-container"></div>
    </div>
  </body>
  <script type="module" src="@fontra/views-fontinfo/start.js"></script>
</html>
